﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <link href="../../Content/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
    <link href="../../Content/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../Content/Site.css" rel="stylesheet" />

    <script src="../../Content/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script src="../../Content/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script src="../../Content/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    @*修改时间格式的Js文件*@
    <script src="../../Content/jquery-easyui-1.3.1/datapattern2.js"></script>

    <script type="text/javascript">

        $(function () {
            //初始化弹出窗体
            //initTable();

            //绑定注册按钮的事件
            BindRegistButtonClickEvent();

            //绑定修改事件的信息
            BindUpdateButtonClickEvent();

            //添加的时候只能添加一个用户名，进行异步判断
            //CheckUserInfoIsTrue();

            //自己写一个验证两次输入的密码相同的JavaScript代码
            //CheckPwdAndPwdOKiSEqualTo();

            //搜索用户信息
            //SearchUNameMailInfo();

        });

        //初始化表格
        function initTable(queryData) {
            $('#test').datagrid({
                title: '用户管理',
                iconCls: 'icon-save',
                height: 400,
                nowrap: true,
                autoRowHeight: false,
                striped: true,
                collapsible: true,
                url: '/LeaveApproval/GetAllLeaveApply',
                sortName: 'ID',
                sortOrder: 'asc',
                //striped:true,
                border: true,
                remoteSort: false,
                idField: 'ID',
                pagination: true,
                rownumbers: true,
                queryParams: queryData,
                columns: [[
                   
                    { field: 'ck', checkbox: true },
					{ field: 'ID', title: 'ID', width: 50, sortable: true },
					{ field: 'UName', title: '姓名', width: 100, sortable: true },
                    { field: 'Type', title: "类型", width: 150, sortable: true, },
                    { field: 'Reason', title: "原因", width: 150, sortable: true, },
                    {
                        field: 'SubTime1', title: "开始日期", width: 150, sortable: true,
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s");
                        }
                    },
                   {
                        field: 'SubTime2', title: "结束日期", width: 150, sortable: true,
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s");
                        }
                   },

                   { field: 'TotalTime', title: "合计时间", width: 150, sortable: true, }
                ]],

                toolbar: [{
                    id: 'btnadd',
                    text: '添加申请',
                    iconCls: 'icon-add',
                    handler: function () {
                        //实现弹出添加用户信息的层
                        ShowCreateUserDialog();
                    }
                }, '-', {
                    id: 'btncut',
                    text: '修改承认申请',
                    iconCls: 'icon-cut',
                    handler: function () {

                        //实现弹出修改用户信息的层
                        ShowUpdateUserDialog();
                    }
                }, '-', {
                    id: 'btnsave',
                    text: '删除申请',
                    iconCls: 'icon-remove',
                    handler: function () {
                        //确认只删除一条用户信息
                        DeleteUserInfoByClick();
                    }
                }]
            });
        }

        //弹出添加用户的对话框
        function ShowCreateUserDialog() {
            //实现弹出添加用户信息的层
            $('#AddUserDialog').dialog('open').dialog('setTitle', '添加用户信息');

            //添加完成后清空文本框的值
            ClearTextBox();
        }

        //注册用户添加事件
        function BindRegistButtonClickEvent() {
            $("#btnRegist").click(function () {
                //验证所有的文本框是否通过用户的验证
                var valid = $('#ff').form('validate');
                if (valid == false) {
                    return false;
                }

                //创建传递的参数, 
                var postdata = {
                    UName: $("#UName").val(),
                    Type: $("#Type").val(),
                    Reason: $("#Reason").val(),
                    SubTime1: $("#SubTime1").val(),
                    SubTime2: $("#SubTime2").val(),
                    TotalTime: $("#TotalTime").val()
                };

                //发送异步请求到后台保存用户数据
                $.post("/LeaveApproval/Apply", postdata, function (data) {
                    if (data == "OK") {
                        //添加成功，(1)关闭对话框，刷新表格
                        alert("申请成功");
                        $('#AddUserDialog').dialog('close');
                        $("#test").datagrid("reload");
                    }
                    else {
                        alert("添加失败，请您检查");
                    }
                });
            });
        }

        //当添加或者修改完成后清空文本框中的值
        function ClearTextBox() {
            //UName,Pwd,PwdOK,Phone,Mail
            $("#UName").val("");
            $("#Type").val("");
            $("#Reason").val("");
            $("#SubTime1").val("");
            $("#SubTime2").val("");
            $("#TotalTime").val("");
        }

        //确认只删除一条用户信息
        function TestUserInfo() {
            //确认只删除一条用户信息
            //function DeleteUserInfoByClick() {
            //    //获取到用户选定的某一列的ID号
            //    var deleteUserInfoID = $("#test").datagrid("getSelections");
            //    //判断用户选择了多少条数据
            //    if (deleteUserInfoID.length == 1) {
            //        $.messager.confirm("删除信息", "您确认删除该条信息吗？", function (DeleteUserInfo) {
            //            if (DeleteUserInfo) {
            //                $.post("/UserInfo/DeleteUserInfo", { deleteUserInfoID: deleteUserInfoID[0].ID }, function (data) {
            //                    if (data == "OK") {
            //                        alert("删除成功");
            //                        $("#test").datagrid("reload");

            //                        //当删除完成的时候清除掉所选择的长度，防止下次选择的时候还记录了上次的内容
            //                        deleteUserInfoID.length = "";

            //                    }
            //                    else {
            //                        alert("删除失败，请检查");
            //                    }
            //                });
            //            }
            //        });
            //    }
            //    else {
            //        $.messager.alert("友情提示", "每次只能删除一行，你已经选择了<font color='red' size='6'>" + deleteUserInfoID.length + "</font>行");
            //    }
            //}
        }

        //实现多选删除信息
        function DeleteUserInfoByClick() {

            //获取到用户选定的某一列的ID号
            var deleteUserInfoID = $("#test").datagrid("getSelections");
            //判断用户选择了多少条数据
            // //异步将删除的ID发送到后台，后台删除之后，返回前台OK，前台刷新表格
            if (deleteUserInfoID.length >= 1) {
                var ids = "";   //1,2,3,4
                for (var i = 0; i < deleteUserInfoID.length; i++) {
                    ids += deleteUserInfoID[i].ID + ",";
                }
                //去掉最后的一个,
                ids = ids.substring(0, ids.length - 1);

                //遍历出删除用户的信息
                var UNameList = "";
                for (var i = 0; i < deleteUserInfoID.length; i++) {
                    UNameList += deleteUserInfoID[i].UName + ",";
                }
                UNameList = UNameList.substring(0, UNameList.length - 1);
                //var LoginUName = $("#test").datagrid("getSelections")[0].UName;
                //发送异步请求删除数据
                $.messager.confirm("删除信息", "您确认删除<font color='Red' size='3'>" + UNameList + "</font>用户吗？", function (DeleteUserInfo) {
                    if (DeleteUserInfo) {
                        $.post("/UserInfo/DeleteUserInfo", { deleteUserInfoID: ids, UName: UNameList }, function (data) {
                            if (data == "OK") {
                                $.messager.alert("友情提示", "删除成功");
                                $("#test").datagrid("reload");

                                //当删除完成的时候清除掉所选择的长度，防止下次选择的时候还记录了上次的内容
                                //第一种方法
                                //deleteUserInfoID.length = "";
                                //第二种方法
                                $("#test").datagrid("clearSelections");
                            }
                            else {
                                $.messager.alert("友情提示", "删除失败:" + data);
                            }
                        });
                    }
                });
            }
            else {
                $.messager.alert("友情提示", "请您选择要删除的数据");
            }
        }

        //弹出修改用户的对话框
        function ShowUpdateUserDialog() {
            var UpdateUserInfoID = $("#test").datagrid("getSelections");
            if (UpdateUserInfoID.length == 1) {
                $("#UpdateUserDialog").dialog("open").dialog("setTitle", "修改承认请假信息");

                //绑定显示修改的详细信息的内容
                BingUpdateDetailsShowTextBox();
            }
            else {
                $.messager.alert("友情提示", "每次只能修改一行数据，你已经选择了<font color='red' size='6'>" + UpdateUserInfoID.length + "</font>行");
            }
        }

        //绑定修改用户的信息显示在用户的TextBox文本框中
        function BingUpdateDetailsShowTextBox() {
            //首先获取选中的用户的ID
            var CheckID = $("#test").datagrid("getSelections")[0].ID;

            //使用异步的getJSON请求绑定前台传递过来的数据
            $.getJSON("/LeaveApproval/GetBindDetails", { ID: CheckID }, function (date) {
                //绑定数据显示到控件上面，UName,Pwd,PwdOK,Phone,Mail
                $("#ID").val(CheckID);
                $("#UName1").val(date.UName);
                $("#Type1").val(date.Type);
                $("#Reason1").val(date.Reason);
                $("#SubTime11").val(date.SubTime1);
                $("#SubTime22").val(date.SubTime2);
                $("#TotalTime1").val(date.TotalTime);
            });
        }

        //修改用户的信息
        function BindUpdateButtonClickEvent() {
            $("#btnUpdate").click(function () {
                //首先判断前台的验证是否通过
                var valid = $('#UpdateUserInfo').form('validate');
                if (valid == false) {
                    return false;
                }

                //构造需要修改的参数，
                var postData = {
                    ID: $("#ID").val(),
                    UName: $("#UName1").val(),
                    Type: $("#Type1").val(),
                    Reason: $("#Reason1").val(),
                    SubTime1: $("#SubTime11").val(),
                    SubTime2: $("#SubTime22").val(),
                    TotalTime: $("#TotalTime1").val()
                };

                //使用异步实现修改用户信息
                $.post("/LeaveApproval/UpdateInfo", postData, function (date) {
                    if (date == "OK") {
                        $("#UpdateUserDialog").dialog('close');
                        $("#test").datagrid('reload');
                    }
                    else {
                        alert("修改失败，请检查");
                    }
                });
            });
        }

        //检查用户名是否存在
        function CheckUserInfoIsTrue() {
            $("#UName").blur(function () {
                //获取输入到控件的值
                var UName = $("#UName").val();
                //使用异步验证
                $.post("/UserInfo/CheckUserName", { UName: UName }, function (date) {
                    if (date == "OK") {
                        alert("用户名已经存在，请您检查");
                        $("#UName").val("");
                        return;
                    }
                });
            });
        }

        //验证两次输入的密码必须一致
        function CheckPwdAndPwdOKiSEqualTo() {
            $.extend($.fn.validatebox.defaults.rules, {
                //判断必须和某个字段相同
                equalTo: {
                    validator: function (value, param) {
                        return $('#' + param[0]).val() == value;
                    },
                    message: '字段不匹配'
                }
            });
        }

        //搜索数据信息
        function SearchUNameMailInfo() {
            //btnSerach，txtSerachName，txtSerachMail
            //按条件进行查询信息
            $("#btnSerach").click(function () {
                var queryData = { SearchName: $("#txtSerachName").val()};
                initTable(queryData);
                return false;
            });
        }

    </script>

</head>
<body>

    @*-------------------------- 搜索-------------------------*@
    <fieldset>
        <legend>用户详细信息模糊搜索</legend>
        <div>
            <label for="txtSerachName">姓名：</label>
            <input type="text" ID="txtSerachName" name="txtSerachName" />&nbsp;&nbsp;

            @*  <input type="button" id="btnSerach" name="btnSerach" value="搜索" />*@
            <a href="#" class="easyui-linkbutton" iconcls="icon-search" id="btnSerach" name="btnSerach">模糊搜索</a>
        </div>
    </fieldset>

    @*-------------------------- 实现对用户数据的显示-------------------------*@
    <div>
        <table id="test"></table>
    </div>

    @*----------------------------设置添加的弹出层--------------------------------*@
    <div id="AddUserDialog" class="easyui-dialog" style="width:360px;height:300px;padding:10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="ff" method="post" novalidate="novalidate">
            <table id="tblAdd">
                <tr>
                    <th colspan="2">添加请假申请</th>
                </tr>
                <tr>
                    <td><label for="UName">用户名：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="UName" name="UName" data-options="required:true,validType:'length[1,32]'" /></td>
                    <td>
                </tr>
                <tr>
                    <td><label for="Type">请假类型：</label></td>
                    <td><input class="easyui-combobox" type="text" id="Type" name="Type" data-options="valueField: 'label',textField: 'value',data: [{
			label: ‘事假',
			value: '事假'
		},{
			label: '公休',
			value: '公休'
		},{
			label: '病假',
			value: '病假'
		}]" /></td>
                </tr>
                <tr>
                    <td><label for="Reason">请假原因：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="Reason" name="Reason" data-options="required:true" /></td>
                </tr>
                <tr>
                    <td><label for="SubTime1">开始日期：</label></td>
                    <td><input class="easyui-datetimebox" type="text" id="SubTime1" name="SubTime1" data-options="required:true,showSeconds:false" /></td>
                    
                </tr>
                <tr>
                    <td><label for="SubTime2">结束日期：</label></td>
                    <td><input class="easyui-datetimebox" type="text" id="SubTime2" name="SubTime2" data-options="required:true,showSeconds:false" /></td>
                   
                </tr>
                <tr>
                    <td><label for="TotalTime">总时间：</label></td>
                    <td><input class="easyui-numberbox" type="text" id="TotalTime" name="TotalTime"  /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" id="btnRegist" iconcls="icon-ok">确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#AddUserDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    @*----------------------------设置修改的的弹出层--------------------------------*@
    <div id="UpdateUserDialog" class="easyui-dialog" style="width:360px;height:300px;padding:10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="UpdateUserInfo" method="post" novalidate="novalidate">
            <table id="tblUpdate">
                <tr>
                    <th colspan="2">承认请假申请</th>
                </tr>
                <tr>
                    <td><label for="ID">用户ID:</label></td>
                    <td><input class="easyui-validatebox" type="text" id="ID" name="ID" readonly="true" /></td>
                    <td>
                </tr>
                <tr>
                    <td><label for="UName">用户名：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="UName1" name="UName" data-options="required:true,validType:'length[1,32]'" /></td>
                    <td>
                </tr>
                <tr>
                    <td><label for="Type">请假类型：</label></td>
                    <td>
                        <input class="easyui-combobox" type="text" id="Type1" name="Type" data-options="valueField: 'label',textField: 'value',data: [{
			label: ‘事假',
			value: '事假'
		},{
			label: '公休',
			value: '公休'
		},{
			label: '病假',
			value: '病假'
		}]" />
                    </td>
                </tr>
                <tr>
                    <td><label for="Reason">请假原因：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="Reason1" name="Reason" data-options="required:true" /></td>
                </tr>
                <tr>
                    <td><label for="SubTime1">开始日期：</label></td>
                    <td><input class="easyui-datetimebox" type="text" id="SubTime11" name="SubTime1" data-options="required:true,showSeconds:false" /></td>

                </tr>
                <tr>
                    <td><label for="SubTime2">结束日期：</label></td>
                    <td><input class="easyui-datetimebox" type="text" id="SubTime22" name="SubTime2" data-options="required:true,showSeconds:false" /></td>

                </tr>
                <tr>
                    <td><label for="TotalTime">总时间：</label></td>
                    <td><input class="easyui-numberbox" type="text" id="TotalTime1" name="TotalTime" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" iconcls="icon-ok">确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#UpdateUserDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>

 
</body>
</html>
